margin: 10px;
&.slider {
//FIXME: better gradient on the slider and hover state
- @include button(normal);
+ @include button(normal, $noedge: true);
border-radius: 50%;
border-color: darken($borders_color,3%);
box-shadow: inset 0 1px if($variant=='light', white,
transparentize(white,0.85)),
inset 0 #{-2px} $bg_color,
inset 0 #{-1px} mix($bg_color,$borders_color,50%);
+ &:hover {
+ @include button(hover, $noedge: true);
+ border-color: darken($borders_color,3%);
+ box-shadow: inset 0 1px if($variant=='light', white,
+ transparentize(white,0.85)),
+ inset 0 #{-2px} if($variant=='light', white,
+ transparentize(white,0.86)),
+ inset 0 #{-1px} mix($bg_color,$borders_color,70%);
+ }
&:insensitive {
background-image: linear-gradient(to bottom, $insensitive_bg_color);
box-shadow: none;
&:active { border: 1px solid darken($selected_borders_color, 3%); }
&.fine-tune:active { //FIXME: Lapo doesn't like the shrinkage. Bad for touch
border: 4px solid transparent; //margin
+ //FIXME: there's a square background under the slider
box-shadow: inset 0 2px $borders_edge,
inset 0 0 0 1px darken($selected_borders_color,3%); //border
}
border-color: #1c1f1f;
text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1);
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
border-radius: 50%;
border-color: #151717;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), inset 0 -2px #393f3f, inset 0 -1px #2a2f2f; }
+ .scale.slider:hover {
+ border-width: 1px;
+ border-style: solid;
+ color: #eeeeec;
+ border-color: #1c1f1f;
+ background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
+ text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+ icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+ border-color: #151717;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), inset 0 -2px rgba(255, 255, 255, 0.14), inset 0 -1px #303535; }
.scale.slider:insensitive {
background-image: linear-gradient(to bottom, #363a3a);
box-shadow: none; }
border-color: #a1a1a1;
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
- box-shadow: inset 0 1px white, 0 1px white;
+ box-shadow: inset 0 1px white;
border-radius: 50%;
border-color: #999999;
box-shadow: inset 0 1px white, inset 0 -2px #ededed, inset 0 -1px #c7c7c7; }
+ .scale.slider:hover {
+ border-width: 1px;
+ border-style: solid;
+ color: #2e3436;
+ border-color: #a1a1a1;
+ background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
+ text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+ icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+ box-shadow: inset 0 1px white;
+ border-color: #999999;
+ box-shadow: inset 0 1px white, inset 0 -2px white, inset 0 -1px #d6d6d6; }
.scale.slider:insensitive {
background-image: linear-gradient(to bottom, #f4f4f4);
box-shadow: none; }